<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习笔记 - 中山大学刷题平台</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-blue': '#045525',        // 校色主蓝
                        'sysu-lightBlue': '#e6f7ff',   // 浅蓝辅助色
                        'sysu-darkBlue': '#03441D',    // 深蓝
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-green': '#045525',       // 校色主绿
                        'sysu-yellow': '#faad14',      // 校色主黄
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-sysu {
                @apply bg-sysu-blue text-white px-4 py-2 rounded-lg hover:bg-sysu-darkBlue transition-colors;
            }
            .btn-outline {
                @apply border border-gray-300 bg-white text-gray-700 px-4 py-2 rounded-lg hover:border-sysu-blue hover:text-sysu-blue transition-colors;
            }
            .card-hover {
                @apply hover:shadow-card-hover transition-shadow duration-300 transform hover:-translate-y-1;
            }
            .section-title {
                @apply text-2xl font-bold text-gray-800 mb-6 relative after:absolute after:bottom-0 after:left-0 after:h-1 after:w-12 after:bg-sysu-blue;
            }
            .note-card {
                @apply bg-white rounded-xl shadow-card p-5 mb-4 transition-all duration-300 hover:shadow-card-hover;
            }
        }
    </style>
</head>
<body class="bg-gray-50 opacity-0" id="body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm transform translate-y-[-20px] opacity-0" id="header">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-blue text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-blue">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block">
                        <input type="text" placeholder="搜索笔记内容"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm w-40 lg:w-56">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                    </div>

                    <!-- 用户区域容器（初始为空，由JS动态填充） -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <script>
                    // 页面加载完成后检查登录状态
                    document.addEventListener('DOMContentLoaded', function() {
                        checkLoginStatus();
                        initSmoothEffects();
                    });

                    // 检查登录状态的AJAX请求
                    async function checkLoginStatus() {
                        const container = document.getElementById('user-area-container');
                        const loadingIndicator = document.getElementById('loading-indicator');

                        try {
                            const token = localStorage.getItem('token');
                            // 发送请求到后端验证接口
                            const response = await fetch('/api/check_login', {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            });

                            if (!response.ok) {
                                throw new Error('验证请求失败');
                            }

                            const data = await response.json();

                            // 根据返回的登录状态渲染不同内容
                            if (data.is_logged_in) {
                                renderLoggedInView(container, data || {});
                            } else {
                                renderLoggedOutView(container);
                            }
                        } catch (error) {
                            console.error('登录状态验证出错:', error);
                            // 出错时默认显示登录/注册按钮
                            renderLoggedOutView(container);
                        } finally {
                            // 隐藏加载指示器
                            if (loadingIndicator) {
                                loadingIndicator.remove();
                            }
                        }
                    }

                    // 渲染已登录视图
                    function renderLoggedInView(container, userData) {
                        container.innerHTML = `
                            <div class="relative" id="userDropdown">
                                <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                                    <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                         alt="${userData.username || '用户头像'}"
                                         class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                                    <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                                </button>
                                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                                    <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                                    <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                                    <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                                </div>
                            </div>
                        `;

                        // 绑定下拉菜单事件
                        bindDropdownEvents();
                    }

                    // 渲染未登录视图
                    function renderLoggedOutView(container) {
                        container.innerHTML = `
                            <a href="/login" class="text-gray-600 hover:text-sysu-blue transition-colors">登录</a>
                            <a href="/register" class="btn-sysu">注册</a>
                        `;
                    }

                    // 绑定下拉菜单事件
                    function bindDropdownEvents() {
                        const trigger = document.getElementById('dropdownTrigger');
                        const menu = document.getElementById('dropdownMenu');
                        const icon = document.getElementById('dropdownIcon');

                        if (trigger && menu && icon) {
                            trigger.addEventListener('click', () => {
                                menu.classList.toggle('hidden');
                                icon.classList.toggle('rotate-180');
                            });

                            // 点击外部关闭下拉菜单
                            document.addEventListener('click', (e) => {
                                if (!trigger.contains(e.target) && !menu.contains(e.target)) {
                                    menu.classList.add('hidden');
                                    icon.classList.remove('rotate-180');
                                }
                            });
                        }
                    }

                    // 退出登录
                    function logout() {
                        try {
                            const token = localStorage.getItem('token');
                            fetch('/api/v1/logout', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            }).then(() => {
                                localStorage.removeItem('token');
                                window.location.href = '/';
                            });
                        } catch (error) {
                            console.error('退出登录出错:', error);
                        }
                    }

                    // 初始化平滑效果
                    function initSmoothEffects() {
                        // 页面加载动画
                        setTimeout(() => {
                            document.getElementById('body').classList.add('opacity-100');
                            document.getElementById('body').style.transition = 'opacity 0.8s ease-out';

                            document.getElementById('header').classList.remove('translate-y-[-20px]', 'opacity-0');
                            document.getElementById('header').style.transition = 'all 0.6s ease-out';
                        }, 100);
                    }
                    </script>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 页面标题区域 -->
        <div class="mb-8">
            <h2 class="section-title">我的学习笔记</h2>
            <div class="flex justify-between items-center flex-wrap gap-4">
                <p class="text-gray-500">记录解题思路和知识点总结，累计 <span class="text-sysu-blue font-medium">12</span> 篇笔记</p>
                <button class="btn-sysu flex items-center">
                    <i class="fa fa-plus mr-2"></i> 新建笔记
                </button>
            </div>
        </div>

        <!-- 笔记分类筛选 -->
        <div class="bg-white rounded-xl shadow-card p-4 mb-6">
            <div class="flex flex-wrap gap-2">
                <button class="px-4 py-2 bg-sysu-blue text-white rounded-lg text-sm">全部笔记</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm transition-colors">算法</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm transition-colors">数据结构</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm transition-colors">编程语言</button>
                <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm transition-colors">竞赛经验</button>
            </div>
        </div>

        <!-- 笔记列表 -->
        <div class="space-y-4">
            <!-- 笔记卡片1 -->
            <div class="note-card card-hover">
                <div class="flex justify-between items-start">
                    <div>
                        <span class="inline-block px-2 py-1 bg-sysu-blue/10 text-sysu-blue text-xs rounded-full mb-3">算法</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">动态规划解题思路总结</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">本文总结了动态规划的基本解题步骤，包括状态定义、转移方程推导和边界条件处理，并通过多个实例详细讲解了如何应用这些技巧解决实际问题...</p>
                    </div>
                    <div class="text-right">
                        <span class="text-gray-400 text-sm">2023-06-15</span>
                        <div class="flex justify-end space-x-2 mt-2">
                            <button class="text-gray-500 hover:text-sysu-blue transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-500 hover:text-sysu-red transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div class="flex items-center text-gray-500 text-sm">
                        <span class="flex items-center mr-4">
                            <i class="fa fa-eye mr-1"></i> 128
                        </span>
                        <span class="flex items-center">
                            <i class="fa fa-tag mr-1"></i> 动态规划、DP优化
                        </span>
                    </div>
                    <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue font-medium flex items-center">
                        查看详情 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
            </div>

            <!-- 笔记卡片2 -->
            <div class="note-card card-hover">
                <div class="flex justify-between items-start">
                    <div>
                        <span class="inline-block px-2 py-1 bg-sysu-yellow/10 text-sysu-yellow text-xs rounded-full mb-3">数据结构</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">二叉树遍历算法详解</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">本文详细介绍了二叉树的四种遍历方式：前序遍历、中序遍历、后序遍历和层次遍历，包括递归和迭代两种实现方法，并对比了各种方法的时间和空间复杂度...</p>
                    </div>
                    <div class="text-right">
                        <span class="text-gray-400 text-sm">2023-05-28</span>
                        <div class="flex justify-end space-x-2 mt-2">
                            <button class="text-gray-500 hover:text-sysu-blue transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-500 hover:text-sysu-red transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div class="flex items-center text-gray-500 text-sm">
                        <span class="flex items-center mr-4">
                            <i class="fa fa-eye mr-1"></i> 95
                        </span>
                        <span class="flex items-center">
                            <i class="fa fa-tag mr-1"></i> 二叉树、遍历算法
                        </span>
                    </div>
                    <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue font-medium flex items-center">
                        查看详情 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
            </div>

            <!-- 笔记卡片3 -->
            <div class="note-card card-hover">
                <div class="flex justify-between items-start">
                    <div>
                        <span class="inline-block px-2 py-1 bg-sysu-green/10 text-sysu-green text-xs rounded-full mb-3">编程语言</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Python列表操作技巧汇总</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2">本文整理了Python列表的常用操作技巧，包括列表推导式、切片操作、排序算法和高效迭代方法，帮助开发者写出更简洁高效的Python代码...</p>
                    </div>
                    <div class="text-right">
                        <span class="text-gray-400 text-sm">2023-05-10</span>
                        <div class="flex justify-end space-x-2 mt-2">
                            <button class="text-gray-500 hover:text-sysu-blue transition-colors" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-500 hover:text-sysu-red transition-colors" title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div class="flex items-center text-gray-500 text-sm">
                        <span class="flex items-center mr-4">
                            <i class="fa fa-eye mr-1"></i> 156
                        </span>
                        <span class="flex items-center">
                            <i class="fa fa-tag mr-1"></i> Python、列表操作
                        </span>
                    </div>
                    <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue font-medium flex items-center">
                        查看详情 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="mt-8 flex justify-center">
            <div class="flex space-x-1">
                <button class="pagination-item disabled">
                    <i class="fa fa-angle-left"></i>
                </button>
                <button class="pagination-item active">1</button>
                <button class="pagination-item">2</button>
                <button class="pagination-item">3</button>
                <button class="pagination-item">
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>
    </main>

    <footer class="bg-white border-t border-gray-200 mt-12 py-8">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2023 中山大学刷题平台 版权所有</p>
        </div>
    </footer>
</body>
</html>